<template>
    <div class="module-container">
        <div v-show="viewShow('list')" class="list-view">
            <Row :gutter="mconst.gutter" class="break-b">
                <Col span="24">
                <Table :context="self" :columns="columns" :data="data.content | rowsStatesDisabledFilters" ref="grid"
                       @on-selection-change="onSelectedRows" @on-sort-change="onSortRemote"></Table>
                </Col>
            </Row>
            <Row :gutter="mconst.gutter">
                <Col span="16">
                <Page :total="data.total" :current="query.page+1" :page-size="query.size"
                      @on-change="onChangePage" @on-page-size-change="onChangePageLimit" show-total show-sizer></Page>
                </Col>
                <Col span="8">
                <div class="btn-group r">
                    <Button :loading="loading" @click.native="onExportExcel">
                        <span v-if="!loading">导出Excel</span>
                        <span v-else>导出中...</span>
                    </Button>
                    <Button type="primary" icon="ios-plus-outline" @click="modalshow = true">新增角色</Button>
                </div>
                </Col>
            </Row>
        </div>
        <Modal v-model="modalshow" @on-ok="onConfirm">
            <p v-if='detail.addModel' slot="header">
                <Icon type="plus-round"></Icon>
                <span>新增角色</span></p>
            <p v-else slot="header">
                <Icon type="edit"></Icon>
                <span>编辑角色</span></p>
            <Form ref="modelForm" class="modelForm" :model="detail.model" :rules="detail.rules" label-position="right"
                  :label-width="mconst.labelWidth">
                <Row :gutter="mconst.gutter">
                    <Col span="18">
                    <Form-item label="名称" prop="name">
                        <Input v-model="detail.model.name" placeholder="请输入角色名称"></Input>
                    </Form-item>
                    </Col>
                </Row>
                <Row :gutter="mconst.gutter">
                    <Col span="18">
                    <Form-item label="编码" prop="code">
                        <Input v-model="detail.model.code" placeholder="请输入角色编码"></Input>
                    </Form-item>
                    </Col>
                </Row>
                <Row :gutter="mconst.gutter">
                    <Col span="18">
                    <Form-item label="角色说明" prop="description">
                        <Input type="textarea" v-model="detail.model.description" placeholder="请输入角色说明"></Input>
                    </Form-item>
                    </Col>
                </Row>


            </Form>
        </Modal>
        <m-dialog ref="deleteMDialog"></m-dialog>
    </div>

</template>

<script>
    import * as constants from 'src/AppConstants'
    import modulesMixin from 'mixins/modules_mixins'
    import { SysRoleColumns } from 'modules/columns/sys_columns'
    import { BaseSelection, BaseAction } from 'modules/columns/base_columns'
    import { SysRoleRules } from 'modules/rules/sys_rules'
    import { SysRoleModel } from 'modules/models/sys_models'
    export default {
        mixins: [modulesMixin],
        components: {
        },
        data () {
            return {
                moduleRout: '/sys/role',
                modalshow:false,
                query: {
                    states: '',
                    sex: '',
                    keyword: {
                        fields: 'username,realname,phone'
                    }
                },
                detail: {
                    model: SysRoleModel,
                    rules: SysRoleRules
                },
                columns: [].concat(BaseSelection, SysRoleColumns)

            }
        },
        methods: {
            onConfirm () {
                this.onSave();
                //this.$Message.info('点击了确定');
            },
            onEdit(index) {
                this.detail.addModel = false
                this.modalshow = true
                let row = this.getRow(index)
                this.detail.model=row
            }
        },
        mounted() {
            this.loadGrid()
        }
    }

















</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
        font-weight: normal;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }

















</style>
